<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-20 14:37:43
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 11:14:59
 * @FilePath: \ProtocolTool\src\renderer\src\views\OneClick\components\TestDetail.vue
-->
<script lang="ts" setup>
import CodeHighlight from '@/components/CodeHighlight/index.vue'
import Simplebar from 'simplebar-vue'
import 'simplebar-vue/dist/simplebar.min.css'

const isShow = ref(false)
const data = ref<any>({})
const requestData = ref()
const responseData = ref()

const isJson = (str) => {
  try {
    JSON.parse(str)
    return true
  } catch (e) {
    return false
  }
}
const parseText = (str) => {
  return str ? str.replaceAll('\n', '<br/>') : 'null'
}

const open = (item) => {
  console.log(item)
  data.value = item
  requestData.value = isJson(data.value?.requestData)
    ? JSON.parse(data.value?.requestData)
    : parseText(data.value?.requestData)
  responseData.value = isJson(data.value?.responseData)
    ? JSON.parse(data.value?.responseData)
    : parseText(data.value?.responseData)
  isShow.value = true
}

defineExpose({
  open
})
</script>

<template>
  <a-modal v-model:open="isShow" title="测试日志" centered width="90%" :footer="null">
    <div class="log">
      <div class="title">请求数据</div>
      <div class="title">响应数据</div>

      <div v-if="isJson(data?.requestData)" class="json req">
        <CodeHighlight lang="json" :value="requestData ?? 'null'" />
      </div>
      <Simplebar v-else class="text">
        <div class="textBox" v-html="requestData"></div>
      </Simplebar>

      <div v-if="isJson(data?.responseData)" class="json res">
        <CodeHighlight lang="json" :value="responseData ?? 'null'" />
      </div>
      <Simplebar v-else class="text">
        <div class="textBox" v-html="responseData"></div>
      </Simplebar>
    </div>
    <div class="info">
      <div class="title">测试说明</div>
      <Simplebar class="desc">
        <span>{{ data?.desc }}</span>
      </Simplebar>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: inline-block;
    width: 2px;
    height: 12px;
    background-color: #1890ff;
    margin-right: 5px;
    border-radius: 1px;
  }
}
.log {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
  margin-bottom: 10px;

  .json {
    height: 300px;
    border-radius: 5px;
    overflow: hidden;
  }
  .text {
    height: 300px;
    border-radius: 5px;
    overflow: auto;

    .textBox {
      min-height: 300px;
      height: fit-content;
      padding: 10px;
      background: #fafafa;
      color: #657b83;
      text-wrap: unrestricted;
      word-break: break-all;
    }
  }
}
.info {
  .desc {
    color: #666;
    max-height: 100px;
  }
}
</style>
